<template>
  <div class="home">
	  <!-- <div style="color: #000000; position: absolute;right: 10px;z-index: 999;left: 0px;">
	  	<span style="font-size: 14px;">{{$t('总会员')}}:{{config.sum_user}}</span>
	  </div> -->
	  <div style="color: #000000; position: absolute;right: 10px;z-index: 999;top: 0px;" @click="goOther(0)">
		  
		 
		  <span style="font-size: 14px;">Language</span>
	  </div>
	 
    <div class="navBar" style="position:static">
      <img :src="$basePath+config.nav_url" alt="" />
    </div>
	
    <div class="content">
      <div class="bannerBox">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            v-for="(item, index) in bannerList"
            :key="index"
            class="swipeItem"
          >
            <van-image
              width="100%"
              height="130"
              :src="$basePath + item.img"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
	  <div class="qiandao" v-if="userInfo.is_sign == 0" @click="signIn">{{$t('每日签到')}}</div>
	  <div class="qiandao" v-if="userInfo.is_sign == 1">{{$t('已签到')}}</div>
	  <div class="topInner" @click="goOther(7)">
	    <p class="title">{{ $t("快捷充币") }}</p>
	    <p class="note">{{ $t("支持") }}<br />{{ $t("BTCUSDTETH等") }}</p>
	  </div>
      <div class="linkBox">
        <div
          class="itemBox"
          v-for="(item, index) in linkList"
          :key="index"
          @click="goOther(item.value)"
        >
          <img :src="item.url" />
          <p>{{ item.name }}</p>
        </div>
      </div>
      
      <div class="swipeTextInner">
        <img src="../assets/images/icon07.png" alt="" />
		<marquee behavior="down" scrolldelay="100" >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="1000"
          :show-indicators="true"
        >
		
          <van-swipe-item
            class="swipeItem"
            @click="goAnother(newsLastDetail.help_id)"
			v-if="newsLastDetail"
            >{{ newsLastDetail.editorValue }}</van-swipe-item
          >
		 
        </van-swipe>
		 </marquee>
        <img @click="goOther(6)" src="../assets/images/icon08.png" alt="" />
      </div>
	 <!-- <div class="topInner2" @click="goOther(4)" >
	    
	  </div> -->
      <div class="dataBox">
        <div class="contentInner">
          <div class="subInner">
            <div
              :class="['item']"
              v-for="(item, index) in symbolsArray"
              :key="index"
              @click="goDetail(item)"
            >
              <p class="title">
                {{ item.note }}<span>/{{ $t("USDT") }}</span>
                <!-- {{ item.title }} -->
              </p>
              <p
                :class="['number', 'green']"
                v-if="
                  ch[`market.${item.symbol}.detail`] &&
                  ch[`market.${item.symbol}.detail`].tick
                "
              >
                {{ ch[`market.${item.symbol}.detail`].tick.close }}
              </p>
              <p
                :class="[
                  'text',
                  ch[`market.${item.symbol}.detail`].change > 0 ? 'green' : '',
                ]"
                v-if="
                  ch[`market.${item.symbol}.detail`] &&
                  ch[`market.${item.symbol}.detail`].change
                "
              >
                {{ ch[`market.${item.symbol}.detail`].change > 0 ? "+" : ""
                }}{{ ch[`market.${item.symbol}.detail`].change }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <van-tabs
        v-model="makeListNum"
        title-inactive-color="#bac1d7"
        title-active-color="#000"
        color="#588bf7"
        @click="getClickFunc"
        @change="getClickFunc"
      >
        <van-tab :title="$t('涨幅榜')" class="innerTabBox" ref="tab01">
          <div
            class="itemInner"
            v-for="(item, index) in tabList01"
            :key="index"
            @click="
              to('/trade', {
                symbol: item,
              })
            "
          >
            <div class="leftInner">
              <span v-if="item">{{
                String(String(item).split(".")[1]).slice(0, -4).toUpperCase()
              }}</span
              >/USDT
            </div>
            <div class="rightInner">
              <p class="note" v-if="ch[item] && ch[item].tick">
                {{ ch[item].tick.close }}
              </p>
              <p
                :class="['num', ch[item].change > 0 ? '' : 'red']"
                v-if="ch[item] && ch[item].change"
              >
                {{ ch[item].change > 0 ? "+" : "" }}{{ ch[item].change }}%
              </p>
            </div>
          </div>
        </van-tab>
		
        <van-tab :title="$t('成交量')" class="innerTabBox subTabBox">
          <div
            class="itemInner"
            v-for="(item, index) in tabList02"
            :key="index"
            @click="
              to('/trade', {
                symbol: item,
              })
            "
          >
            <div class="leftInner">
              <span v-if="item">{{
                String(String(item).split(".")[1]).slice(0, -4).toUpperCase()
              }}</span
              >/USDT
            </div>
            <div class="rightInner">
              <p class="note" v-if="ch[item] && ch[item].tick">
                {{ ch[item].tick.close }}
              </p>
              <p class="num" v-if="ch[item] && ch[item].change">
                {{ ch[item].change > 0 ? "+" : "" }} {{ (ch[item].tick.amount/1000000).toFixed(2) }}M
              </p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <tabBar :active="0"></tabBar>
  </div>
</template>

<script>
import tabBar from "@/components/tabBar.vue";
import { EventBus } from "@/utils/event-bus";
export default {
  name: "Home",
  components: { tabBar },
  data() {
    return {
      bannerList: [],
      linkList: [
        {
          url: require("../assets/images/icodown.png"),
          name: this.$t("下载APP"),
          value: 100,
        },
        {
          url: require("../assets/images/icon02.png"),
          name: this.$t("在线客服"),
          value: 1,
        },
        {
          url: require("../assets/images/icon03.png"),
          name: this.$t("帮助中心"),
          value: 2,
        },
        {
          url: require("../assets/images/icon04.png"),
          name: this.$t("市场交易"),
          value: 3,
        },
        {
          url: require("../assets/images/icon05.png"),
          name: this.$t("新币申购"),
          value: 4,
        },
        {
          url: require("../assets/images/icon06.png"),
          name: this.$t("合作财富"),
          value: 5,
        },
      ],
      // 币种列表
      symbolsArray: [
        { symbol: "btcusdt", title: "BTC/USDT" },
        { symbol: "ethusdt", title: "ETH/USDT" },
        { symbol: "eosusdt", title: "EOS/USDT" },
        { symbol: "crousdt", title: "CRO/USDT" },
        { symbol: "trxusdt", title: "TRX/USDT" },
      ],
      makeListNum: 0,
      tabList01: [],
      tabList02: [],
      newsLastDetail: {},
      ch: {}, //实时数据
      sort: true, //是否排序,
	  config:[],
	  userInfo:[]
    };
  },
  created() {
    this.$nextTick(async () => {
      this.symbolsArray = await this.initMarketInfo();
      console.log(this.symbolsArray, "this.symbolsArray");
      // vuex里先取出数据
      this.symbolsArray.forEach((item) => {
        let d = this.$store.state.websocket.ch[`market.${item.symbol}.detail`];
        if (!d) return;
        this.$set(
          d,
          "change",
          parseFloat(
            ((d.tick.close - d.tick.open) / d.tick.open) * 100
          ).toFixed(2)
        );
        this.$set(this.ch, `market.${item.symbol}.detail`, d);
    //     console.log(this.ch, "首页ch");
        if (this.makeListNum == 0) {
          this.changeSort(this.ch);
        } else if (this.makeListNum == 1) {
          this.amountSort(this.ch);
        }
      });
      // 定时查询
      let Interval = setInterval(() => {
        if (this.$store.state.websocket.is_open_socket) {
          this.loadTopMarket();
          // 已连接移除定时器
          clearInterval(Interval);
        }
      }, 500);
    });
  },
  mounted() {
    this.initNewsLastInfo();
    this.initBannersInfo();
	$postAxios(api.getService, {}, (res) => {
	  this.config = res.data;	
	});
	//this.initinfo();
  },
  methods: {
	  initinfo(){
		$postAxios(api.getUserInfo, {}, (res) => {
				  
		  if (res.code == 0) {
		    this.userInfo = res.data;
		  } else {
		    this.$toast(this.$t(res.msg));
		  }
		});  
	  },
	// 签到
	signIn(){
		$postAxios(api.signIn, {}, (res) => {
				  
		  if (res.code == 0) {
		    this.$toast(this.$t(res.msg));
			this.initinfo();
		  } else {
		    this.$toast(this.$t(res.msg));
		  }
		});
	}, 
    //跳转页面
    to(to, query) {
      let str = query.symbol.substring(7, query.symbol.length - 7);
      this.symbolsArray.forEach((item) => {
        if (item.symbol == str) {
          this.$router.push({
            path: to,
            query: {
              symbol: item,
            },
          });
        }
      });
    },
    // tab切换
    getClickFunc(val) {
      if (val == 0) {
        this.changeSort(this.ch);
      } else if (val == 1) {
        this.amountSort(this.ch);
      }
    },
    //  涨幅排序
       changeSort(arrData) {
         // console.log(arrData, "arrData1");
          let keysSorted = Object.keys(arrData).sort(function (a, b) {
            return arrData[b].change - arrData[a].change;
          });
       //  let keysSorted = Object.keys(arrData);
         // console.log(keysSorted, "tabList01");
         this.tabList01 = keysSorted;
       },
       // 24H成交量排序
       amountSort(arrData) {
         // console.log(arrData, "arrData2");
          let keysSorted = Object.keys(arrData).sort(function (a, b) {
            return arrData[b].tick.amount - arrData[a].tick.amount;
          }); 
        // let keysSorted = Object.keys(arrData);
         //排序健名
         // console.log(keysSorted, "tabList02");
         this.tabList02 = keysSorted;
       },
   
    // 获取首页滑动数据
    async initMarketInfo() {
      const result = await new Promise((resolve) => {
		  
        $postAxios(api.getMarket, {}, (res) => {
			
          if (res.code == 0) {
            let arr = res.data.map((item) => {
              let obj = {
                note: item.EN_name,
                symbol: String(item.EN_name).toLowerCase() + "usdt",
                title: item.EN_name + "/USDT",
                bi_id: item.bi_id,
                is_zixuan: item.is_zixuan,
                img: item.img,
              };
			  
              return obj;
            });
            resolve(arr);
          } else {
            this.$toast(this.$t(res.msg));
          }
        });
      });
      return result;
    },
    //  最新市场概要快照
    loadTopMarket() {
      this.symbolsArray.forEach((item) => {
        let ch = `market.${item.symbol}.detail`;
        // 消息回调
        EventBus.$on(ch, (res) => {
          if (!res.data) return;
          let d = res.data;
          d.change = parseFloat(
            ((d.tick.close - d.tick.open) / d.tick.open) * 100
          ).toFixed(2);
          this.$set(this.ch, res.data.ch, d);
          // console.log(this.ch, "ch");
        });
      });
      // console.log(this.symbolsArray, "this.symbolsArray");
    },
    // 获取最新公告
    initNewsLastInfo() {
		
      let data = {
        type: 1,
        language: String(this.$i18n.locale).toUpperCase()
      };
      $postAxios(api.getNotify, data, (res) => {
        if (res.code == 0) {
          this.newsLastDetail = res.data[0];
          // this.$dialog.alert({
          //   title: this.$t("公告"),
          //   message: `${this.newsLastDetail.title} <br> ${this.newsLastDetail.editorValue}`,
          //   confirmButtonText: this.$t("关闭"),
          //   closeOnClickOverlay: true,
          // });
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 获取轮播图数据
    initBannersInfo() {
      $postAxios(api.getSlideList, {}, (res) => {
        if (res.code == 0) {
          this.bannerList = res.data;
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 跳转页面
    goOther(index) {
		
      if (index == 0) {
		this.$router.push("/switchLanguage");
      } else if (index == 1) {
        this.$router.push("/onlineService");
      } else if (index == 2) {
        this.$router.push("/helper");
      } else if (index == 3) {
        this.$router.push("/quotes");
      } else if (index == 4) {
        this.$router.push("/subscription");
      } else if (index == 5) {
        this.$router.push("/LockUpMining");
      } else if (index == 6) {
        this.$router.push("/news");
      } else if (index == 7) {
        this.$router.push("/recharge");
      }else if(index==100){
			window.location.href = this.config.miaoshu
			return;
	  }
    },
    // 跳转交易页面
    goDetail(item) {
      this.$router.push({
        path: "/trade",
        query: {
          symbol: item,
        },
      });
    },
    // 跳转最新公告详情页面
    goAnother(id) {
      this.$router.push("/newsDetail?id=" + id);
    },
  },
};
</script>
<style scoped lang="scss">
@mixin line($line: 1) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  overflow: hidden;
  word-break: break-all;
}
.home {
  width: 100%;
  height: 100%;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
  background-color: #fff;
  .navBar {
    width: 100%;
    position:absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    z-index: 10000;
    border-bottom: 1px solid #e5e5e5;
    background-color: #fff;
    img {
      width: auto;
      height: 25px;
      display: block;
    }
  }
  .content {
    width: 100%;
    position: absolute;
    left: 0;
    top: 44px;
    bottom: 54px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
	.qiandao{
		font-size:14px;position: absolute; right: 20px;line-height: 20px;width: 80px;
		background-color: #2ebc83;text-align: center;color: #F0F0F0;border-radius: 10px;
		top: 4.6rem;
	}
    .innerTabBox {
      margin-top: 11px;
      .itemInner {
        margin-bottom: 11px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .leftInner {
          color: #bac1d7;
          font-size: 14px;
          span {
            color: #303133;
            font-size: 16px;
            font-weight: 700;
          }
        }
        .rightInner {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .note {
            color: #303133;
            font-size: 15px;
            font-weight: 700;
          }
          .num {
            margin-left: 22px;
            padding: 8px;
            width: 104px;
            color: #fff;
            font-size: 15px;
            text-align: center;
            border-radius: 5px;
            box-sizing: border-box;
            background-color: #2ebc83;
            &.red {
              background-color: #cd4e65;
            }
          }
        }
      }
    }
    .subTabBox {
      .itemInner {
        .rightInner {
          .num {
            background-color: #00abff;
          }
        }
      }
    }
    .bannerBox {
      margin: 10px 13px 35px;
      .my-swipe {
        width: 100%;
        .swipeItem {
          height: 130px;
          border-radius: 10px;
          ::v-deep.van-image {
            img {
              border-radius: 10px;
            }
          }
        }
        ::v-deep.van-swipe__indicator--active {
          width: 18px;
          border-radius: 20px;
        }
      }
    }
    .linkBox {
      margin: 0px 0 35px;
      display: flex;
      align-items: start;
      justify-content: start;
      flex-wrap: wrap;
      .itemBox {
        margin-top: 10px;
        width: 33%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        img {
          margin-bottom: 5px;
          width: auto;
          height: 45px;
          display: block;
        }
        p {
          color: #303133;
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .topInner {
      padding-top: 15px;
      width: 100%;
      height: 90px;
      box-sizing: border-box;
      background: #f2f2fc url("../assets/images/bg03.png") no-repeat center
        center;
      background-size: 100% auto;
      p {
        text-align: center;
      }
      .title {
        margin-bottom: 3px;
        color: #4069e7;
        font-size: 16px;
      }
      .note {
        color: #939393;
        font-size: 12px;
      }
    }
	.topInner2 {
	 
	  width: 100%;
	  height: 90px;
	  box-sizing: border-box;
	  border-radius: 10px;
	  padding-left: 10px;
	      padding-right: 10px;
	  background:  url("../assets/images/en-xb.png") no-repeat center
	    center;
	  background-size: 95% auto;
	  
	}
    .swipeTextInner {
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 10px solid #f2f2fc;
      img {
        margin-right: 5px;
        width: auto;
        height: 20px;
        display: block;
      }
      .notice-swipe {
        flex: 1;
        flex-shrink: 0;
        .swipeItem {
          height: 20px;
          @include line(1);
          text-align: left;
          color: #303133;
          font-size: 12px;
          line-height: 20px;
          box-sizing: border-box;
        }
      }
    }
    .dataBox {
      padding: 10px 0;
      border-bottom: 10px solid #f2f2fc;
      .contentInner {
        width: 100%;
        height: 90px;
        overflow-x: auto;
        .subInner {
          width: 100%;
          height: 100%;
          white-space: nowrap;
        }
        &::-webkit-scrollbar {
          height: 0px;
        }
        .item {
          margin-left: 15px;
          padding: 10px 0;
          width: 105px;
          display: inline-block;
          border-radius: 10px;
          box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.1);
          p {
            text-align: center;
          }
          &:last-child {
            margin: 0 15px;
          }
          .title {
            margin-bottom: 5px;
            color: #333;
            font-size: 16px;
            font-weight: 800;
            span {
              color: #777;
              font-size: 11px;
              font-weight: 600;
            }
          }
          .number {
            margin-bottom: 5px;
            color: #cd4e65;
            font-size: 16px;
            font-weight: 800;
            &.green {
              color: #1cad90;
            }
          }
          .text {
            color: #cd4e65;
            font-size: 12px;
            font-weight: 600;
            &.green {
              color: #1cad90;
            }
          }
        }
      }
    }
  }
}
</style>
